<html>
  <head>
  <link href="main.css" rel="stylesheet" />
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  </head>
  <body ng-app="lokidemo">
  <div class="container" ng-controller="DemoController">
    <div id="header">LokiJS Demo App
    </div>
    <div style="clear: both"></div>
    <div id="main">
      <h4>Insert data</h4>
      <span>name: </span><input type="text" ng-model="newContact.name" />
      <span>age: </span><input type="number" ng-model="newContact.age" />
      <span>first language: </span><input type="text" ng-model="newContact.firstLanguage" /> 
      <button ng-click="insert()" style="vertical-align: middle">Insert</button>
      <div id="results">
        <table style="border: 0">
          <thead>
          <th>name</th>
          <th>age</th>
          <th>first language</th>
          <th></th>
          </thead>
          <tr ng-repeat="c in contacts.data track by $index">
            <td>{{ c.name }}</td>
            <td>{{ c.age }}</td>
            <td>{{ c.firstLanguage }}</td>
            <td><button ng-click="delete(c)">delete</button>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <script>
    
    var loki = require('../../src/lokijs.js', { env: 'NODEJS'}),
      fs = require('fs'),
      app = angular.module('lokidemo', []);
    app.controller('DemoController', ['$scope', function ($scope) {
      var DB_FILE = 'demo.json';

      $scope.newContact = {};
      $scope.contacts;
      $scope.db;

      $scope.quit = function () {
        $scope.db.close();
        window.close();
      };

      // call on window close?  since fs adapter is synchronous this should work
      $scope.$on("$destroy", function() {
        $scope.db.close();
        window.onbeforeunload = undefined;
      });

      // scope on destroy does not seem to work well with node webkit so this is workaround from :
      // http://captainkuro.com/javascript/accessing-file-system-with-node-webkit/
      var gui = require('nw.gui'); 
      gui.Window.get().on('close', function() { 
        $scope.db.close();

        this.close(true); // don't forget this line, else you can't close window
      }); 

      $scope.insert = function () {
        $scope.contacts.insert($scope.newContact);
        $scope.newContact = {};
      };

      $scope.delete = function (i) {
        $scope.contacts.remove(i);
      };

      $scope.contacts;

      $scope.db = new loki(DB_FILE, { 
          env: 'NODEJS', 
          autoload: true,
          autoloadCallback: function() {
            $scope.contacts = $scope.db.getCollection('contacts');
            
            // if the database did not exist we will initialize empty database here
            if ($scope.contacts === null) {
              $scope.contacts = $scope.db.addCollection('contacts');
              $scope.contacts.insert({name: 'joe', age: 39, firstLanguage: 'italian'});
              $scope.contacts.insert({name: 'dave', age: 30, firstLanguage: 'english'});
              $scope.contacts.insert({name: 'tim', age: 30, firstLanguage: 'english'});
              $scope.contacts.insert({name: 'jonas', age: 30, firstLanguage: 'swedish'});
              $scope.contacts.insert({name: 'pedro', age: 30, firstLanguage: 'spanish'});
            }
            
            console.log($scope);
            $scope.$apply();
          },
          autosave : true,
          autosaveInterval : 5000
        }
      );
    }]);
    
  </script>
  </body>
</html>